const state = reactive({
    map: null,
    lng: '116.397492',
    lat: '39.909144',
    mapKey: '****-EQVEP-6P5D4-LZRUB-HMES2-6TBQL',
    attendance_address: '',
  });
  //页面加载
  onMounted(async () => {
    initMap();
    //我这里因为是http没办法使用如果是https符合谷歌浏览器同源策略即可获取用户当前经纬度;
    //代码我贴出来 希望你们能用到 不用的需要注释掉
    if (navigator.geolocation) {
     navigator.geolocation.getCurrentPosition(
       position => {
         const { latitude, longitude } = position.coords;
         state.lng = longitude;
         state.lat = latitude;
       },
       error => {
         console.log(error);
         Message.error('获取位置失败');
       }
     );
   } else {
     Message.error('浏览器不支持Geolocation API');
   }
  });
  //查询地图
  function searchMap() {
    state.map.destroy(); //卸载不然会出现多个地图
    initMap(); //实例化
  }
  //实例化地图
  function initMap() {
    var center = new TMap.LatLng(state.lat, state.lng); //自己写的经纬度
    state.map = new TMap.Map(document.getElementById('container'), {
      center: center,
      zoom: 13,
      draggable: true,
      scrollable: true,
      doubleClickZoom: true,
      showControl: false,
    });
    //拖拽地图
    state.map.addListener('dragend', handleMapDragEnd);
    //jsonp获取详细信息
    const url = `https://apis.map.qq.com/ws/geocoder/v1/?address=${state.addFormField.address}&key=${state.mapKey}&output=jsonp`;
    const callbackName = `jsonpCallback_${Date.now()}`;
    window[callbackName] = data => {
      if (data.status === 310 || data.status === 347) {
        Message.info('获取位置失败,请输入详细地址信息');
        return;
      }
      state.lng = data.result.location.lng;
      state.lat = data.result.location.lat;
      let center = new TMap.LatLng(data.result.location.lat, data.result.location.lng);
      state.map.panTo(center);
      //逆解析地址
      getAddress(data.result.location.lat, data.result.location.lng);
    };
    const script = document.createElement('script');
    script.src = `${url}&callback=${callbackName}`;
    document.body.appendChild(script);
  }
  //拖拽函数
  function handleMapDragEnd() {
    var center = state.map.getCenter();
    var lng = center.lng.toFixed(3);
    var lat = center.lat.toFixed(3);
    state.lat = lat;
    state.lng = lng;
    getAddress(lat, lng);
  }
  //逆解析函数
  function getAddress(lat, lng) {
    const location = `${lat},${lng}`;
    const url = `https://apis.map.qq.com/ws/geocoder/v1/?location=${location}&key=${state.mapKey}&output=jsonp`;
    const callbackName = `jsonpCallback_${Date.now()}`;
    window[callbackName] = data => {
      if (data.status === 310 || data.status === 347) {
        Message.info('获取位置失败,请输入详细地址信息');
        return;
      }
      state.addFormField.attendance_address = data.result.formatted_addresses.recommend;
    };
    const script = document.createElement('script');
    script.src = `${url}&callback=${callbackName}`;
    document.body.appendChild(script);
  }
  